<template>
  <div class="header">
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="area"
        :options="areaAll"
        @click="cutCity(areaAll[area].text)"
      />
    </van-dropdown-menu>
    <van-search
      v-model="search"
      placeholder="请输入搜索内容"
      @click="kipSearch"
    />
    <i v-if="num === 1" class="iconfont icon-touxiang" @click="skip"></i>
    <i class="users" v-else @click="$router.push({ name: 'me' })">{{ user }}</i>
  </div>
  <div class="banner">
    <div class="bn-left">
      <img
        src="https://p1.meituan.net/travelcube/86c5b686264c3cda292c30f623970f955983.png"
      />
      <div class="bn-text">
        <p>省钱利器&ensp;购物超划算</p>
        <span>吃喝玩乐尽在美团</span>
      </div>
    </div>
    <button>去APP</button>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import axios from 'axios'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance() //获取子父通信
let user = ref('')
let num = ref(1)
let search = ref('')
let area = ref(0)
let areaAll = reactive([
  { text: '青岛', value: 0 },
  { text: '北京', value: 1 },
  { text: '上海', value: 2 },
  { text: '深圳', value: 3 },
  { text: '广州', value: 4 }
])
const store = useStore() //vuex相关方法
const router = useRouter()
function cutCity(city) {
  axios({
    url: 'http://localhost:5000/Home',
    method: 'get'
  }).then((res) => {
    console.log(city)
    console.log(res.data[city])
    store.commit('homeData/changeCity', res.data[city])
    proxy.$emit('handleClickChange', res.data[city]) //连接父组件的handleClickChange方法，同时将值传递给父组件
  })
}
onMounted(() => {
  let adminname = !!localStorage.getItem('adminname')
  if (adminname) {
    num.value = 2
    user.value = localStorage.getItem('adminname')
  }
})
function kipSearch() {
  //跳转搜索页
  router.push({ name: 'search' })
}
function skip() {
  //跳转登录
  router.push({ name: 'login' })
}
</script>

<style lang="scss" scoped>
@import '@/iconfont/iconfont.css';
:root {
  --van-dropdown-item-background-color: red;
}
.header {
  height: 0.5rem;
  background: #ffcc00;
  padding: 0 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;

  .van-dropdown-menu {
    --van-dropdown-menu-background-color: rgba(0, 0, 0, 0);
    --van-dropdown-menu-title-font-size: 0.14rem;
    --van-dropdown-menu-height: 0.5rem;
    --van-dropdown-menu-title-line-height: 0.5rem;
    --van-dropdown-menu-title-margin-right: 0.02rem;
    --van-dropdown-menu-box-shadow: 0, 0, 0, 0;
    .van-dropdown-item {
      height: 100%;
    }
  }
  .van-search {
    width: 2.46rem;
    height: 0.3rem;
    border-radius: 0.3rem;
    --van-search-action-font-size: 0.3rem;
    background: #ffffff;
    overflow: hidden;
  }
  .iconfont {
    font-size: 0.26rem;
    width: 0.26rem;
  }
  .users {
    font-size: 0.14rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 0.32rem;
  }
}
.banner {
  height: 0.5rem;
  background: #000000;
  padding: 0 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  button {
    height: 0.3rem;
    width: 0.5rem;
    background: #ffcc00;
    border-radius: 0.1rem;
    font-size: 0.12rem;
    border: none;
    color: #000;
  }
  .bn-left {
    height: 100%;
    display: flex;
    align-items: center;
    img {
      height: 0.4rem;
      width: 0.4rem;
    }
    .bn-text {
      display: flex;
      margin-left: 0.1rem;
      flex-direction: column;
      p {
        font-size: 0.14rem;
        line-height: 0.24rem;
        margin: 0;
      }
      span {
        font-size: 0.1rem;
      }
    }
  }
}
</style>
